<template>
  <article class="log">
    <app-head title="账户明细"></app-head>
<!--    v-if="item.status===2"-->
    <scroll :data="ptbConsumeList" action="getPtbConsumeList" :offset="20">
      <ul slot="scrollInner" class="log-inner" v-if=" ptbConsumeList.list&& ptbConsumeList.list.length>0">
          <li class="log-item"  v-if="item.status===2" v-for="(item, index) in ptbConsumeList.list" :key="index">
              <div class="message" >
                  <h1 class="title">《{{item.gamename}}》充值消费</h1>
                  <p class="time">{{dateFormat(item.create_time)}}</p>
              </div>
              <span class="count">{{amountFormat(item)}}</span>
          </li>
      </ul>
    </scroll>
  </article>
</template>

<script>
import { mapGetters } from 'vuex'
import Scroll from '@/components/common/Scroll'

export default {
  name: 'log',
  components: {
    Scroll
  },
  data () {
    return {

    }
  },
  computed: {
    ...mapGetters([
      'ptbConsumeList'
    ])
  },
  methods: {
    amountFormat (item) {
      let str = '-'
      if (item.payway.indexOf('币') > -1) {
        str += item.amount + item.payway
      } else {
        str += item.real_amount + '元'
      }
      return str
    }
  },
  created () {
    this.$store.dispatch('getPtbConsumeList', {
      offset: 20
    })
  }
}
</script>

<style scoped="scoped" lang="scss">

    .log {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        overflow-y: scroll;
        background:rgba(248,248,248,1);
        &-inner {
            padding: 0 0.15rem;
            background-color: #ffffff;
        }
        &-item {
            display: flex;
            align-items: center;
            height: 0.54rem;
            border-bottom: 0.01rem solid #F8F8F8;
            &:last-child {
                border: none;
            }
            .message {}
            .title {
                font-weight: 600;
                font-size: 0.15rem;
                color: #333333;
                line-height: 0.21rem;
                margin-bottom: 0.02rem;
            }
            .time {
                font-size: 0.12rem;
                color: #999999;
            }
            .count {
                font-weight: 600;
                margin-left:auto;
                color: #FF6905;
                font-size: 0.16rem;
            }
        }
    }

</style>
